<template>
  <div class="img-box">
    <el-carousel v-if="list.length > 0" class="img-box-carousel">
      <el-carousel-item v-for="(item, index) in list" :key="index">
        <img class="box-carousel-img" :src="item.imgurl" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  props: {
    url: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      list: [
        {
          imgurl: require("../../assets/components/picinfoEcarousel/xiangguan.png")
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      if (this.url === "/xiangguantu") {
        this.list = [
          {
            imgurl: require("../../assets/components/picinfoEcarousel/xiangguan.png")
          }
        ];
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.img-box {
  width: 100%;
  height: 100%;
  .img-box-carousel {
    width: 100%;
    height: 100%;
    .box-carousel-img {
      width: 100%;
      height: 100%;
    }
  }
  ::v-deep .el-carousel__container {
    width: 100%;
    height: 100%;
  }
  ::v-deep .el-carousel__item {
    width: 100%;
    height: 100%;
    background-color: aqua;
  }
  //   ::v-deep .el-carousel__indicators--horizontal {
  //     display: none;
  //   }
  ::v-deep .el-carousel__button {
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background-color: rgb(1, 252, 167, 1);
    opacity: 0.3;
  }
}
</style>
